<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
</head>

<body>
    <header class="index-header" style="padding-top:1.5rem; height:6.5rem;">
        <div class="index-header-l">
            <img src="./images/head-s.png">
        </div>
        <img class="logo" src="./images/logo.png">
        <div class="index-header-r">
            <span class="fa fa-bell-o"></span>
        </div>
        <div class="aui-clearfix"></div>
        <!-- 搜索begin -->
        <div class="index-search" tapmode onclick="search()">
            <label>
            <span class="aui-iconfont aui-icon-search"></span>
            <input type="text" placeholder="请输入商品名称">
        </label>
        </div>
        <!-- 搜索end -->
    </header>



    <!-- <div class="foot-t"></div>
    <div class="foot">
        <ul>
            <li tapmode onclick="randomSwitchBtn( 0 );">
                <img src="./images/foot-1.png">
                <p>首页</p>
            </li>
            <li tapmode onclick="randomSwitchBtn( 1 );">
                <img src="./images/foot-2.png">
                <p>商城</p>
            </li>
            <li class="foot-m" onclick="randomSwitchBtn( 2 );">
                <img src="./images/foot-5.png">
            </li>
            <li tapmode onclick="randomSwitchBtn( 3 );">
                <img src="./images/foot-3.png">
                <p>分销</p>
            </li>
            <li tapmode onclick="randomSwitchBtn( 4 );">
                <img src="./images/foot-4.png">
                <p>我的</p>
            </li>
        </ul>
    </div> -->

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript">
    function randomSwitchBtn(index) {
        api.setFrameGroupIndex({
            name: 'nav',
            index: index,
            reload: true,
        });
        var NVTabBar = api.require('NVTabBar');
        NVTabBar.setSelect({
            index: index,
            selected: true,
        });
    }

    apiready = function() {
        tabBer();

    }


    function tabBer() {
        var NVTabBar = api.require('NVTabBar');
        NVTabBar.open({
            styles: {
                bg: '#ffffff',
                //bg:"widget://image/NVTabBar/tabbar_bg.png",
                h: 50,
                dividingLine: {
                    width: 0,
                    color: '#000'
                },
                badge: {
                    bgColor: '#fff',
                    numColor: '#fff',
                    size: 6.0,
                    centerX: 40,
                    centerY: 6
                }
            },
            items: [{
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    // image: 'rgba(200,200,200,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://images/foot-1.png',
                    highlight: 'widget://images/foot-1.png',
                    selected: 'widget://images/foot-1.png'
                },
                title: {
                    text: '首页',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    // image: 'rgba(200,200,200,0.7)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://images/foot-2.png',
                    highlight: 'widget://images/foot-2.png',
                    selected: 'widget://images/foot-2.png'
                },
                title: {
                    text: '商城',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 20,
                    // image: 'widget://images/foot-5.png' //中间背景图
                },
                iconRect: {
                    w: 60,
                    h: 60,
                },
                icon: {
                    normal: 'widget://images/foot-5.png',
                    highlight: 'widget://images/foot-5.png',
                    selected: 'widget://images/foot-5.png'
                },
                title: {
                    //text : '333',
                    // size: 0.0,
                    // normal: '#696969',
                    // selected: '#eb4f38',
                    // marginB: 0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    // image: 'rgba(200,20,0,0.6)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://images/foot-3.png',
                    highlight: 'widget://images/foot-3.png',
                    selected: 'widget://images/foot-3.png'
                },
                title: {
                    text: '分销',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }, {
                w: api.winWidth / 5.0,
                bg: {
                    marginB: 0,
                    // image: 'rgba(220,0,220,0.7)'
                },
                iconRect: {
                    w: 25.0,
                    h: 25.0,
                },
                icon: {
                    normal: 'widget://images/foot-4.png',
                    highlight: 'widget://images/foot-4.png',
                    selected: 'widget://images/foot-4.png',
                },
                title: {
                    text: '我的',
                    size: 12.0,
                    normal: '#696969',
                    selected: '#eb4f38',
                    marginB: 6.0
                }
            }],
            selectedIndex: 0
        }, function(ret, err) {
            // alert( JSON.stringify( ret ) );
            openframe();
            api.setFrameGroupIndex({
                name: 'nav',
                index: ret.index,
                reload: true,
            });
            NVTabBar.bringToFront();


        });


    }


    function openframe() {
        api.openFrameGroup({
            name: 'nav',
            scrollEnabled: false,
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                marginBottom: 50
            },
            frames: [{
                name: 'index',
                url: './index.html',
                bgColor: '#fff'
            }, {
                name: 'classify',
                url: './classify.html',
                bgColor: '#fff'
            }, {
                name: 'cart',
                url: './cart.html',
                bgColor: '#fff'
            }, {
                name: 'distribution',
                url: './distribution.html',
                bgColor: '#fff'
            }, {
                name: 'user_index',
                url: './user_index.html',
                bgColor: '#fff'
            }]
        }, function(ret, err) {

        });
    }
</script>

</html>
